<template>
    <v-layout class="w-100 h-screen d-flex justify-center align-center">
        <v-sheet
            v-if="mode == 'confirm'"
            elevation="8"
            rounded="lg"
            width="500"
            class="pa-4 text-center mx-auto"
        >
            <h1 class="my-4 font-weight-bold text-uppercase">Reset Password</h1>
            <v-text-field
                class="mx-4 my-6"
                prepend-inner-icon="mdi-email-outline"
                label="E-mail"
                :rules="emailRules"
                hide-details="auto"
                variant="outlined"
                v-model="email"
            >
            </v-text-field>
            <v-btn
                class="w-75 my-4"
                color="green"
                size="large"
                @click="confirm"
                :disabled="email === ''"
            >
                Confirm
            </v-btn>
            <div class="ma-8">
                <v-btn
                    class="float-right"
                    variant="text"
                    @click="router.push({ name: 'login' })"
                    >Login</v-btn
                >
            </div>
        </v-sheet>
        <v-sheet
            v-else
            elevation="8"
            rounded="lg"
            width="500"
            class="pa-4 text-center mx-auto"
        >
            <h1 class="my-4 font-weight-bold text-uppercase">Reset Password</h1>
            <v-text-field
                class="mx-4 my-6"
                prepend-inner-icon="mdi-lock-outline"
                label="Password"
                type="password"
                :rules="pwRules"
                hide-details="auto"
                variant="outlined"
                v-model="password"
            >
            </v-text-field>
            <v-text-field
                class="mx-4 my-6"
                prepend-inner-icon="mdi-lock-outline"
                label="Confirm Password"
                type="password"
                :rules="pwRules"
                hide-details="auto"
                variant="outlined"
                v-model="re_password"
            >
            </v-text-field>
            <v-btn
                class="w-75 my-4"
                color="green"
                size="large"
                @click="confirm"
                :disabled="password === '' || re_password === ''"
            >
                Confirm
            </v-btn>
            <div class="ma-8">
                <v-btn
                    class="float-right"
                    variant="text"
                    @click="router.push({ name: 'login' })"
                    >Login</v-btn
                >
            </div>
        </v-sheet>
    </v-layout>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { useUserStore } from '../../stores/user'
const User = useUserStore()
const mode = ref('confirm')
const router = useRouter()
const email = ref('')
const password = ref('')
const re_password = ref('')

const emailPattern =
    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
const passwordPattern = /(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,30}/

// 邮箱密码检验
const emailRules = [
    (value) => !!value || 'Required.',
    (value) => (value || '').length <= 20 || 'Max 20 characters',
    (value) => {
        return emailPattern.test(value) || 'Invalid e-mail.'
    }
]
const pwRules = [
    (value) => !!value || 'Required.',
    (value) => {
        return passwordPattern.test(value) || 'must contain letters, numbers, and special characters'
    }
]

function confirm() {
    switch (mode.value) {
        case 'confirm':
            if (!emailPattern.test(email.value)) {
                return
            }
            mode.value = 'reset'
            return
        case 'reset':
            if (!passwordPattern.test(password.value)) {
                return
            }
            User.passwdReset(
                email.value,
                password.value,
                () => {
                    router.push({
                        name: 'login'
                    })
                },
                () => {
                    mode.value = 'confirm'
                }
            )
            return
    }
}
</script>
